<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:src="@{../assets/jquery/jquery.js}"></script>
    <meta charset="UTF-8">
    <link type="text/css" th:href="@{../assets/css/theme.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{../assets/js/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{../assets/vendor/jquery/jquery.min.js}"></script>
    <script th:src="@{../assets/vendor/popper/popper.min.js}"></script>

    <!-- FontAwesome 5 -->
    <script th:src="@{../assets/vendor/fontawesome/js/fontawesome-all.min.js}"></script>

    <!-- Boomerang JS -->
    <script th:src="@{../assets/js/theme.js}"></script>
    <title>Title</title>
</head>
<body>
<div class="container d-flex align-items-center no-padding">
    <div class="col">
        <div class="row align-self-center">
            <div class="col-lg-6 offset-lg-8">
                <div class="card bg-gradient-purple text-white">
                    <div class="card-body">
                        <span class="clearfix"></span>
                        <img src="../assets/images/brand/gamepad-solid.svg" style="width: 50px;">

                        <h4 class="heading h3 text-white pt-3 pb-5">密码登录</h4>
                        <form class="row g-3">
                            <div class="col-md-6">
                                <label for="inputEmail4" class="form-label">昵称</label>
                                <input type="email" class="form-control" id="inputEmail4">
                            </div>
                            <div class="col-md-6">
                                <label for="inputPassword4" class="form-label">年龄</label>
                                <input type="password" class="form-control" id="inputPassword4">
                            </div>
                            <div class="custom-control custom-radio mb-3">
                                <input type="radio" name="custom-radio-1" class="custom-control-input" id="customRadio1">
                                <label class="custom-control-label" for="customRadio1">保密</label>
                            </div>
                            <div class="custom-control custom-radio mb-3">
                                <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio2" checked="">
                                <label class="custom-control-label" for="customRadio2">男</label>
                            </div>
                            <div class="custom-control custom-radio mb-3">
                                <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio3" checked="">
                                <label class="custom-control-label" for="customRadio3">女</label>
                            </div>

                            <div class="col-12">
                                <label for="inputAddress" class="form-label">Address</label>
                                <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
                            </div>
                            <div class="col-12">
                                <label for="inputAddress2" class="form-label">Address 2</label>
                                <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
                            </div>
                            <div class="col-md-6">
                                <label for="inputCity" class="form-label">City</label>
                                <input type="text" class="form-control" id="inputCity">
                            </div>
                            <div class="col-md-4">
                                <label for="inputState" class="form-label">State</label>
                                <select id="inputState" class="form-select">
                                    <option selected>Choose...</option>
                                    <option>...</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="inputZip" class="form-label">Zip</label>
                                <input type="text" class="form-control" id="inputZip">
                            </div>
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="gridCheck">
                                    <label class="form-check-label" for="gridCheck">
                                        Check me out
                                    </label>
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>